<template>
    <section class="FormulationOfAssessmentIndicators">
        <div v-loading="loadIndex" element-loading-text="指标生成中..."  element-loading-background="rgba(255, 255, 255, 0.4)">
            <div v-loading="loadIndicator" element-loading-text="指标制定中..." element-loading-background="rgba(255, 255, 255, 0.4)">
                <div v-loading="load" element-loading-text="任务发布中..." element-loading-background="rgba(255, 255, 255, 0.4)">
                    <div class="FormulationOfAssessmentIndicatorsContent">
                        <el-row>
                            <el-col>
                                <div class="towMake">
                                    <div class="titleReleave">
                                        <span>指标制定</span>
                                    </div>
                                </div>
                                <div class="topSTyle">
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form size="big" style="text-align: left" label-width="100px" :inline="false" :model="reviewForm">
                                                <el-form-item style="font-size: 16px" label="指标年份" prop="fileYear" :rules="{required: true, message: '指标年份不能为空'}">
                                                    <el-date-picker v-model="reviewForm.fileYear" @change="handleYear" type="year" placeholder="请选择指标年份" value-format="yyyy"> </el-date-picker>
                                                </el-form-item>
                                                <el-form-item v-if="hasTask" label="友情提示" style="font-weight: bold;font-size: 16px;color: red !important;">
                                                    <span slot="label" style="font-weight: bold;font-size: 16px;color: red">友情提示:</span>
                                                    <span style="font-weight: bold;font-size: 16px;color: red">当前年度已发布指标制定任务,不可编辑及发布!</span>
                                                </el-form-item>
                                            </el-form>
                                        </el-col>
                                        <el-col :span="12">
                                          <el-row style="float: right">
                                              <el-button class="btnReleave btnConfirm" type="primary" :disabled="taskContent && taskContent.hasConfirm === '1'" @click="indexConfirm" size="medium">
                                                  <i scale="4" class="el-icon-check el-confirm"></i>
                                                  <span style="font-size: 29px; vertical-align: super;">确  认</span> 
                                              </el-button>
                                            </el-row>
                                            <el-form  size="big" :inline="false" :model="form" ref="form" class="release-form" label-width="100px" :rules="rules">
                                                <el-row v-show="false">
                                                    <el-col :span="24">
                                                        <el-form-item label="任务名称" prop="name">
                                                            <el-input v-model="form.name" ></el-input>
                                                        </el-form-item>
                                                    </el-col>
                                                </el-row>
                                                <el-row>
                                                    <el-col :span="24">
                                                        <el-form-item label="截止日期" prop="endTime">
                                                            <el-date-picker v-model="form.endTime" type="date" class="end_time" placeholder="选择截止日期">
                                                            </el-date-picker>
                                                        </el-form-item>
                                                    </el-col>
                                                </el-row>
                                                <el-row v-show="false">
                                                    <el-col :span="24">
                                                        <el-form-item label="任务类型" prop="type">
                                                            <el-select v-model="form.type" :disabled="disabled">
                                                                <el-option v-for="item in typeList" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                                            </el-select>
                                                        </el-form-item>
                                                    </el-col>
                                                </el-row>
                                                <el-row v-show="false">
                                                    <el-col>
                                                        <el-form-item label="工作内容" prop="content">
                                                            <el-input v-model="form.content" type="textarea"  style="width:340px" :rows="4"></el-input>
                                                        </el-form-item>
                                                    </el-col>
                                                </el-row>
                                                <el-row>
                                                    <el-form-item label=" ">
                                                        <el-button class="btn_reset" type="warning" @click="setTree()" size="medium"  :disabled="hasTask">
                                                            <icon name="save" scale="2" class="release-icon" ></icon>
                                                            <span style="vertical-align: text-bottom">保 存</span>
                                                        </el-button>
                                                        <el-button class="btnReleave" type="primary" :disabled="hasTask" @click="submit('form')" size="medium">
                                                            <icon name="release" scale="2" class="release-icon" ></icon>
                                                            <span style="vertical-align: text-bottom">发 布</span>
                                                        </el-button>
                                                    </el-form-item>
                                                </el-row>
                                            </el-form>
                                            
                                        </el-col>
                                    </el-row>
                                    <el-col :span="13">
                                      <div class="quota-container" :style="containerHeight">
                                          <div class="quota-root">
                                              <div class="root-name"></div>
                                              <div class="root-logo"></div>
                                          </div>
                                          <div class="expand-icon"></div>
                                          <div class="root-row-line"></div>
                                          <div :style="firstLevelLine" class="root-col-line"></div>
                                          <div :style="firstLevelActiveLine" class="root-col-line-active"></div>
                                          <div class="first-level-out-container">
                                              <div v-for="(item, index) in treeData" :class="`first-level-container ${index === quotaActiveIndex ? 'first-level-container-active' : ''}`" @click="handleCurrentQuotaChange(item, index)">
                                                <template v-if="(treeData.length > 0 && hasTask ) || (!hasTask && index !== treeData.length - 1)">
                                                    <div :class="`row-line ${index === quotaActiveIndex ? 'row-line-active' : ''}`"></div>
                                                    <el-tooltip placement="right-start" effect="light" popper-class="review_tooltip">
                                                      <div slot="content" >{{item.note}}</div>
                                                      <div class="first-level-contain">
                                                          <div class="first-level-top">
                                                              <div class="quota-name">{{item.quotaName}}</div>
                                                              <div class="child-add" v-if="!hasTask" @click="addchildLeverOne(item)"></div>
                                                          </div>
                                                          <div class="first-level-mid"></div>
                                                          <div class="first-level-bottom">
                                                              <div class="star"></div>
                                                              <div class="quota-score">{{item.quotaScore || '0'}}分</div>
                                                              <div v-if="!hasTask" class="del" @click.stop="deleteNode(item,index)"></div>
                                                              <div v-if="!hasTask" class="edit" @click.stop="editOne(item,index)" ></div>
                                                          </div>
                                                      </div>
                                                    </el-tooltip>
                                                    <div v-show="item.kpiQuotas && item.kpiQuotas.length > 0" :class="index === quotaActiveIndex && expandable ? 'commissure-icon' : 'expand-icon'" @click.prevent.stop="handleCommissure(index)"></div>
                                                    <div class="quota-detail" v-show="index === quotaActiveIndex && expandable && item.kpiQuotas">
                                                        <div v-show="item.kpiQuotas && item.kpiQuotas.length > 0" class="row-line row-line-active"></div>
                                                        <div :style="childLine(item.kpiQuotas)" class="root-col-line-active"></div>
                                                        <div class="first-level-out-container">
                                                            <div v-for="(subItem,subIndx) in item.kpiQuotas" :class="`first-level-container ${index === quotaActiveIndex ? 'first-level-container-active' : ''}`">
                                                                <div :class="`row-line ${index === quotaActiveIndex ? 'row-line-active' : ''}`"></div>
                                                                <el-tooltip placement="right-start" effect="light" popper-class="review_tooltip">
                                                                  <div slot="content">{{subItem.note}}</div>
                                                                  <div class="first-level-contain">
                                                                      <div class="first-level-top">
                                                                          <div class="quota-name" style="font-size: 18px;">{{subItem.quotaName}}</div>
                                                                      </div>
                                                                      <div class="first-level-mid"></div>
                                                                      <div class="first-level-bottom">
                                                                          <div class="star"></div>
                                                                          <div class="quota-score">{{subItem.quotaScore || '0'}}分</div>
                                                                          <div v-if="!hasTask" class="del" @click="deleteNode(subItem,subIndx)"></div>
                                                                          <div v-if="!hasTask" class="edit" @click="editOne(subItem,subIndx,'')"></div>
                                                                      </div>
                                                                  </div>
                                                                </el-tooltip>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </template>
                                                <template v-else>
                                                    <div style="width: 185px" :class="`row-line ${index === quotaActiveIndex ? 'row-line-active' : ''}`"></div>
                                                    <div style="width: 145px">
                                                        <div class="first-level-add"></div>
                                                    </div>
                                                </template>
                                            </div>
                                        </div>
                                          <!-- <div class="town-container" v-if="hasTask && trackList.length > 0">
                                              <transition-group name="list-complete" tag="div">
                                                  <div class="town-item-container list-complete-item" v-bind:key="item.objectId" v-for="(item, index) in trackList">
                                                  <div :class="`town-item ${activeTownIndex === index ? 'town-item-active' : ''}`" @click="handleTownChange(item, index)">
                                                      <div v-show="activeTownIndex !== index" :style="itemPrefix(item.status)"></div>
                                                      <div class="second-level-contain">
                                                          <div class="second-level-top">
                                                              <div class="quota-name">{{item.objectName}}</div>
                                                          </div>
                                                          <div class="second-level-mid"></div>
                                                          <div class="second-level-bottom">
                                                              <div :class="`bage-status bage-status-${item.status}`"></div>
                                                              <div class="current-status">
                                                                  <span>当前状态：</span>
                                                                  <span v-html="handleStatusLabel(item.status)"></span>
                                                              </div>
                                                          </div>
                                                      </div>
                                                  </div>
                                                  <div style="display: flex;align-items: center" v-if="activeTownIndex === index">
                                                      <div v-show="townQuotas.length > 0" class="row-line row-line-active"></div>
                                                      <div  v-show="townQuotas.length > 0" :style="townLevelActiveLine" class="root-col-line-active"></div>
                                                      <div class="town-quota-container">
                                                          <div v-for="(subItem, index) in townQuotas" class="town-quota-contain">
                                                              <div style="display: flex;align-items: center;justify-content: left;margin-left: -2px">
                                                                  <div class="row-line row-line-active"></div>
                                                                  <div class="first-level-contain" style="border: 2px solid  #389671;">
                                                                      <div class="first-level-top">
                                                                          <div class="quota-name">{{subItem.quotaName}}</div>
                                                                      </div>
                                                                      <div class="first-level-mid"></div>
                                                                      <div class="first-level-bottom">
                                                                          <div class="star"></div>
                                                                          <div class="quota-score">{{subItem.quotaScore || '0'}}分</div>
                                                                      </div>
                                                                  </div>
                                                                  <div v-show="subItem.kpiTownQuotas.length > 0" :class="index === townQuotaActiveIndex && townQuotaExpandable ? 'commissure-icon' : 'expand-icon'"
                                                                      @click="handleTownQuotasChange(index)"></div>
                                                              </div>
                                                              <div style="display: flex;align-items: center;justify-content: left"
                                                                  v-if="townQuotaActiveIndex === index && townQuotaExpandable && subItem.kpiTownQuotas.length > 0">
                                                                  <div class="row-line row-line-active"></div>
                                                                  <div :style="townQuotasLevelActiveLine" class="root-col-line-active"></div>
                                                                  <div  style="display: flex; flex-direction: column">
                                                                      <div v-for="(grandItem, index) in subItem.kpiTownQuotas" class="last-quota-container">
                                                                          <div class="row-line row-line-active"></div>
                                                                          <div class="first-level-contain" style="border: 2px solid  #389671;">
                                                                              <div class="first-level-top">
                                                                                  <div class="quota-name">{{grandItem.quotaName}}</div>
                                                                              </div>
                                                                              <div class="first-level-mid"></div>
                                                                              <div class="first-level-bottom">
                                                                                  <div class="star"></div>
                                                                                  <div class="quota-score">{{grandItem.quotaScore || '0'}}分</div>
                                                                              </div>
                                                                          </div>
                                                                      </div>
                                                                  </div>
                                                              </div>
                                                          </div>
                                                      </div>
                                                  </div>
                                              </div>
                                              </transition-group>
                                          </div> -->
                                      </div>
                                    </el-col>
                                    <el-col :span="11">
                                      <indexManage ref="indexManage" :currentYear="this.reviewForm.fileYear" :isTask="hasTask" :style="{position: 'relative', top: '0px'}"></indexManage>
                                    </el-col>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog :title="title" v-if="addTreeView"  :visible.sync="addTreeView"  :append-to-body="true"  width="30%" align="left">
            <el-form :model="addForm" class="dialog-form" ref="addForm" label-width="115px" :rules="rules">
                <template>
                    <el-form-item  label="指标名称" prop="quotaName" :inline="true">
                        <el-input v-model="addForm.quotaName" type="text"></el-input>
                    </el-form-item>
                    <!-- <el-form-item  label="指标内容" prop="quotaContent" :inline="true">
                        <el-input v-model="addForm.quotaContent" type="textarea" row="3"></el-input>
                    </el-form-item> -->
                    <el-form-item  label="指标分值" prop="quotaScore" :inline="true">
                        <el-input v-model="addForm.quotaScore" type="number"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="是否有权重" prop="isSetWeight" v-if="isFirstLeavel">
                        <el-radio-group v-model="addForm.isSetWeight">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="0" >否</el-radio>
                        </el-radio-group>
                    </el-form-item> -->
                    <!-- <el-form-item label="指标类型" prop="onceOrMore" v-if="isFirstLeavel">
                        <el-radio-group v-model="addForm.onceOrMore">
                            <el-radio label="一年一次"></el-radio>
                            <el-radio label="一年多次"></el-radio>
                        </el-radio-group>
                    </el-form-item> -->
                    <!-- <el-form-item label="指标制定部门" prop="quotaMakeDepartId">
                        <el-select v-model="addForm.quotaMakeDepartId" :multiple="checkMore" placeholder="请选择指标制定部门" >
                            <el-option v-for="item in depList" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="指标打分部门" prop="quotaScoringDepartId">
                        <el-select v-model="addForm.quotaScoringDepartId" :multiple="checkMore"  placeholder="请选择指标打分部门">
                            <el-option v-for="item in depList" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="积分规则" prop="quotaIntegrationMethod">
                        <el-select v-model="addForm.quotaIntegrationMethod"  placeholder="请选择积分规则">
                            <el-option label="格次赋分法" value="格次赋分法"></el-option>
                            <el-option label="累积法" value="累积法"></el-option>
                            <el-option label="平均分法" value="平均分法"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item  label="指标说明" prop="note" :inline="true">
                        <el-input v-model="addForm.note" type="textarea" rows="3"></el-input>
                    </el-form-item>
                </template>
                <el-form-item :inline="true" label-width="105px">
                    <el-button type="primary"   @click="addFirstLevelNode('addForm')" v-if="addFirst">新增一级</el-button>
                    <el-button type="primary"   @click="addSameLevelNode" v-if="addMore">新增同级</el-button>
                    <el-button type="primary"   @click="addChildNode('addForm')" v-if="addCild">新增子级</el-button>
                    <el-button type="primary"   @click="editNode('addForm')" v-if="edit">编辑</el-button>
                    <el-button type="danger"    @click="cancelTree">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </section>
</template>

<script>
    import indexManage from "./IndexManage";
    export default {
        name: "FormulationOfAssessmentIndicators",
        props:{
            releaseType:{
                type:String,
            }
        },
        data(){
            return{
                load:false,
                loadIndicator:false,
                loadIndex:false,
                form:{
                    // name: new Date().getFullYear() + ''
                    taskYear:''
                },
                rules:{
                    quotaName: [
                        { required: true, message: '请输入指标名称', trigger: 'blur' }
                    ],
                    quotaContent: [
                        { required: true, message: '请输入指标内容', trigger: 'blur' }
                    ],
                    quotaScore: [
                        { required: true, message: '请输入指标分值', trigger: 'blur' }
                    ],
                    isSetWeight: [
                        { required: true, message: '请选择指标权重', trigger: 'blur' }
                    ],
                    onceOrMore: [
                        { required: true, message: '请选择指标类型', trigger: 'blur'}
                    ],
                    quotaMakeDepartId:[
                        { required: true, message: '请选择指标制定部门', trigger: 'blur'}
                    ],
                    quotaScoringDepartId:[
                        { required: true, message: '请选择指标打分部门', trigger: 'blur'}
                    ],
                    quotaIntegrationMethod:[
                        { required: true, message: '请选择积分规则', trigger: 'blur'}
                    ],
                    endTime:[
                        { required: true, message: '截止日期不能为空', trigger: 'blur'}
                    ]

                },
                typeList:[
                    {
                        label:"基本信息更新",
                        value:"基本信息更新"
                    },
                    {
                        label:"考核指标内容制定",
                        value:"考核指标内容制定"
                    },
                    {
                        label:"考核实施",
                        value:"考核实施"
                    },
                    {
                        label:"职级评定",
                        value:"职级评定"
                    },
                    {
                        label:"日常工作考核",
                        value:"日常工作考核"
                    },
                    {
                        label:"村干部信息更新",
                        value:"村干部信息更新"
                    }
                ],
                checkTypeList:[
                    {
                        label:"考核实施",
                        value:"考核实施"
                    },
                    {
                        label:"日常工作考核",
                        value:"日常工作考核"
                    }
                ],
                disabled:false,
                menuVisible:false,
                reviewForm:{
                    fileYear: new Date().getFullYear().toString(),
                },
                firstLevel:false,
                secondLevel:false,
                currentData:{},
                currentNode:{},
                id:1000,
                defaultProps: {
                    id:'quotaId',
                    children: 'kpiQuotas',
                    label: 'quotaName',
                },
                treeData: [],
                resetTreeDate:[],
                addTreeView:false,
                addForm:{
                    isSetWeight:false,
                    quotaScore:'',
                    quotaContent:'',
                    quotaName:'',
                },
                depList:[],
                addMore:false,
                addCild:false,
                edit:false,
                addFirst:true,
                title:'新增指标',
                newTree1 : [],
                taskObj:'',
                releaseList:[],
                scroll:{
                    marginTop:'0px'
                },
                user:{},
                activityList: [],
                totalLoad:false,
                hasTask:false,
                taskContent:'',
                allTask : [],
                trackList:[],
                checkMore:false,
                indexObj:{},
                quotaActiveIndex: 0,
                expandable: false,
                activeTownIndex: 0,
                townQuotas: [],
                townQuotaExpandable: true,
                townQuotaActiveIndex: 0,
                trackListCopy: [],
                finalHeight: 0,
                editData:{},
                editIndex:0,
                isFirstLeavel:true,
                allId: ''
            }
        },
        computed: {
            firstLevelLine() {
                let size = this.treeData.length;
                if (size <= 1) {
                    return {height: '0px'};
                }
                return {height: `${175 * size - 165 - 40 * (size - 1) - 8}px`}
            },
            firstLevelActiveLine() {
                let size = this.treeData.length;
                if (size <= 1) {
                    return {height: '0px'};
                }
                let height = (175 * size - 165 - 40 * (size - 1) - 8)/2;
                let top = Number(`-${height/2}`);
                height = Math.abs(height - this.quotaActiveIndex * 135);
                top += this.quotaActiveIndex * 67.5;
                return {height: `${height}px`, top: `${top}px`, position: 'relative'}
            },
            townLevelActiveLine() {
                let size = this.townQuotas.length;
                return {height: `${175 * size - 165 - 40 * (size - 1) - 8}px`}
            },
            townQuotasLevelActiveLine() {
                let size = this.townQuotas[this.townQuotaActiveIndex].kpiTownQuotas.length;
                return {height: `${175 * size - 165 - 40 * (size - 1) - 8}px`}
            },
            containerHeight() {
                let minHeight = 1000;
                let quotaHeight = Number(this.firstLevelLine.height.replace(/px/, ''));
                let secondQuotaHeight = 0;
                if (this.expandable && this.treeData[this.quotaActiveIndex]) {
                    secondQuotaHeight = Number(this.childLine(this.treeData[this.quotaActiveIndex].kpiQuotas).height.replace(/px/, ''));
                };
                // let townHeight = 0;
                // if (this.hasTask) {
                //     minHeight = this.trackList.length * 110;
                //     townHeight = Number(this.townLevelActiveLine.height.replace(/px/, ''));
                // }

                // let townThirdHeight = 0;
                // if (this.hasTask && this.townQuotaExpandable && this.townQuotas.length > 0) {
                //     townThirdHeight = Number(this.townQuotasLevelActiveLine.height.replace(/px/, ''));
                // }
                let leftMaxHeight = quotaHeight + secondQuotaHeight + 100;
                // let rightMaxHeight = townHeight + townThirdHeight;
                let finalHeight = Math.max(minHeight, leftMaxHeight, );
                this.finalHeight = finalHeight;
                return {height: `${finalHeight}px`};
            }
        },
        methods:{
            getTree(year){
                this.loadIndex = true;
                this.treeData = [];
                return this.$http('post',`/identity/kPITownQuota/getTownQoutaTree`,{quotaYear:year},false).then(data=>{
                    this.loadIndex = false;
                    if(data) {
                        this.treeData = data;
                        // if(!this.hasTask) {
                        //   this.treeData.push({})
                        // }
                    }
                });
            },
            handleYear(val) {
                if (!val) {
                    return;
                }
                this.hasTask = false;
                this.quotaActiveIndex = 0;
                this.form.taskYear = val;
                this.trackList = [];
                this.townQuotas = [];
                this.$nextTick(() => {
                    this.getTree(val).then(_ => {
                        this.checkIsHasTask(val);
                    })
                })
            },
            //新增第一级别的弹窗
            addFirstIndex(){
                this.addForm = {
                    quotaMakeDepartId: [],
                    quotaScoringDepartId: []
                };
                this.checkMore = true;
                this.addCild = false;
                this.addMore = false;
                this.edit = false;
                this.addFirst = true;
                this.title = '新增指标';
                this.$nextTick(() => {
                    this.addTreeView = true;
                })
                //新增一級的時候给他选一年一次还是一年多次
                this.isFirstLeavel = true;
            },
            //新增第一级别的确定
            addFirstLevelNode(addForm){
                this.$refs[addForm].validate((valid) => {
                    if(valid){
                        //新增一級的時候给他选一年一次还是一年多次
                        this.addForm.onceOrMore = '一年一次';
                        this.depList.forEach((item)=>{
                            if(item.value == this.addForm.quotaMakeDepartId){
                                this.addForm.quotaMakeDepartName=item.label;
                            };
                            if(item.value == this.addForm.quotaScoringDepartId){
                                this.addForm.quotaScoringDepartName=item.label;
                            }
                        });
                        let quotaId = '';
                        if(this.treeData.length==1){
                            quotaId = this.reviewForm.fileYear+'01';
                        }else if(this.treeData.length>1){
                            quotaId = this.getMaxId(this.treeData,1);
                        }
                        this.addForm.quotaId=quotaId;
                        this.addForm.quotaYear=this.reviewForm.fileYear;
                        this.addForm.kpiQuotas=[];
                        this.addForm.quotaLevel=1;
                        this.addForm.quotaMakeNewDepartId='';
                        this.addForm.quotaScoringNewDepartId='';
                        this.addForm.parentQuotaId = 0;

                        this.addTreeView = false;
                        this.checkMore = false;


                        let dept = this.addForm.quotaMakeDepartId.concat();
                        dept.forEach((item)=>{
                            this.addForm.quotaMakeNewDepartId+=item+'-'
                        });
                        this.addForm.quotaMakeNewDepartId = this.addForm.quotaMakeNewDepartId.substring(0,this.addForm.quotaMakeNewDepartId.length-1);
                        let deptScore = this.addForm.quotaScoringDepartId.concat();
                        deptScore.forEach((item)=>{
                            this.addForm.quotaScoringNewDepartId+=item+'-'
                        });
                        this.addForm.quotaScoringNewDepartId = this.addForm.quotaScoringNewDepartId.substring(0,this.addForm.quotaScoringNewDepartId.length-1);
                        this.treeData.splice(this.treeData.length-1, 1, this.addForm, {});
                    }
                });
            },
            //增加同级
            addSamleLeverOne(data,node){
                this.checkMore = true;
                this.addCild = false;
                this.addMore = true;
                this.edit = false;
                this. addFirst = false;
                this.addForm = {};
                this.addMore = true;
                this.title = '新增同级';
                this.currentData = data;
                this.currentNode = node;
                this.addTreeView = true;

            },
            // 增加同级节点事件
            addSameLevelNode (addForm) {
                this.depList.forEach((item)=>{
                    if(item.value == this.addForm.quotaMakeDepartId){
                        this.addForm.quotaMakeDepartName=item.label;
                    };
                    if(item.value == this.addForm.quotaScoringDepartId){
                        this.addForm.quotaScoringDepartName=item.label;
                    }
                });

                let MaxId = '';
                let leave = this.currentData.quotaLevel;
                if(this.treeData.length-1<0){
                    MaxId = '00';
                }else {
                    MaxId =  this.treeData[this.treeData.length-1].quotaId;
                }
                let id = this.dealMaxid(MaxId);
                this.addForm.parentQuotaId = this.currentData.parentQuotaId;
                this.addForm.quotaId=this.reviewForm.fileYear+id;
                this.addForm.quotaYear=this.reviewForm.fileYear;
                this.addForm.kpiQuotas=[];
                this.addForm.quotaLevel=leave;
                this.addForm.quotaMakeNewDepartId='';
                this.addForm.quotaScoringNewDepartId='';

                this.addTreeView = false;
                this.checkMore = false;
                let dept = this.addForm.quotaMakeDepartId.concat();
                dept.forEach((item)=>{
                    this.addForm.quotaMakeNewDepartId+=item+'-'
                });
                this.addForm.quotaMakeNewDepartId = this.addForm.quotaMakeNewDepartId.substring(0,this.addForm.quotaMakeNewDepartId.length-1);

                let deptScore = this.addForm.quotaScoringDepartId.concat();
                deptScore.forEach((item)=>{
                    this.addForm.quotaScoringNewDepartId+=item+'-'
                });
                this.addForm.quotaScoringNewDepartId = this.addForm.quotaScoringNewDepartId.substring(0,this.addForm.quotaScoringNewDepartId.length-1);


                var data = this.addForm;
                // this.$refs.tree.append(data,this.currentNode.parent);
            },
            cancelTree(){
                this.addTreeView = false;
            },
            getMaxId(arr,level){
                let maxId = parseInt(arr[0].quotaId);
                if(level==1){
                    for(let i = 0;i<arr.length-2;i++){
                        maxId = maxId < parseInt(arr[i+1].quotaId) ? parseInt(arr[i+1].quotaId) : maxId;
                    }
                }else if(level==2){
                    for(let i = 0;i<arr.length-1;i++){
                        maxId = maxId < parseInt(arr[i+1].quotaId) ? parseInt(arr[i+1].quotaId) : maxId;
                    }
                }
                arr.forEach(item=>{
                    if(item.quotaId){
                    }
                });
                return maxId+1;
            },

            //新增子级
            addchildLeverOne(data){
                this.addCild = true;
                this.addMore = false;
                this.edit = false;
                this.addFirst = false;
                // this.addForm = {};
                this.title = '新增子级';
                this.currentData = data;
                this.addTreeView = true;
                this.checkMore = false;
                //新增子级，二级是否权重和指标类型隐藏
                this.isFirstLeavel = false;
            },
            // 增加子级节点事件
            addChildNode (addForm) {
                this.$refs[addForm].validate((valid) => {
                    if(valid){
                        this.addCild = true;
                        this.addMore = false;
                        this.edit = false;
                        this.addFirst = false;
                        let quotaId = '';
                        if(this.currentData.kpiQuotas.length==0){
                            quotaId = this.currentData.quotaId+'01';
                        }else if(this.currentData.kpiQuotas.length>0){
                            quotaId = this.getMaxId(this.currentData.kpiQuotas,2);
                        }
                        this.$nextTick(()=>{
                            this.addForm.onceOrMore = this.currentData.onceOrMore;
                            this.addForm.isSetWeight = this.currentData.isSetWeight;
                            this.addForm.quotaId = quotaId;
                            this.addForm.quotaYear = this.reviewForm.fileYear;
                            this.addForm.kpiQuotas = [];
                            this.addForm.quotaLevel = 2;
                            this.addForm.parentQuotaId = this.currentData.quotaId;
                            this.currentData.kpiQuotas.push(this.addForm);
                            this.addTreeView = false;
                            this.expandable = true;
                        })
                    }
                });
            },
            //编辑
            editOne(data,inx){
                this.currentData = data;
                this.editIndex = inx;
                this.editData = Object.assign({},data);
                this.addCild = false;
                this.addMore = false;
                this.edit = true;
                this.addFirst = false;
                this.title='编辑指标';
                 //如果是直接拉出来的是字符串，将字符串转换成数组
                if(Object.prototype.toString.call(this.editData.quotaMakeDepartId) === "[object String]"&&this.editData.quotaLevel=='1'){
                    this.editData.quotaMakeNewDepartId='';
                    this.editData.quotaScoringNewDepartId='';
                    let dept = this.editData.quotaMakeDepartId;
                    this.editData.quotaMakeNewDepartId = dept.split('-');
                    let deptScore = this.editData.quotaScoringDepartId;
                    this.editData.quotaScoringNewDepartId = deptScore.split('-');
                    let makeDep = '';
                    let scoreDep = '';
                    makeDep = this.editData.quotaMakeDepartId;
                    scoreDep = this.editData.quotaScoringDepartId;
                    this.editData.quotaMakeDepartId=  this.editData.quotaMakeNewDepartId;
                    this.editData.quotaScoringDepartId = this.editData.quotaScoringNewDepartId;
                    this.editData.quotaMakeNewDepartId = makeDep;
                    this.editData.quotaScoringNewDepartId = scoreDep;
                }
                this.addForm = this.editData;
                this.addTreeView = true;
                if(this.addForm.quotaLevel=='1'){
                    this.checkMore=true;
                    this.isFirstLeavel = true;
                }else {
                    this.checkMore=false;
                    this.isFirstLeavel = false;
                }

            },
            editNode (addForm) {
                this.$refs[addForm].validate((valid) => {
                    if (valid) {
                        if(this.addForm.quotaLevel=='1'){
                            this.treeData.splice(this.editIndex,1,this.editData);
                            this.addTreeView = false;
                        }else {
                            //如果编辑的是二级指标，已知二级指标的数据和位置；
                            this.treeData.forEach((item)=>{
                                if(item.quotaId === this.editData.parentQuotaId){
                                    item.kpiQuotas.splice(this.editIndex,1,this.editData);
                                }
                            });
                            this.addTreeView = false;
                        }
                    }else{

                    }
                });
            },
            // 删除节点
            deleteNode (data,node) {
                this.currentData = data;
                this.currentNode = node;
                let temp = [].concat(this.treeData);
                if(data.quotaLevel=='1'){
                    temp.splice(node,1);
                }else {
                    temp.forEach(item=>{
                        if(item.quotaId===this.currentData.parentQuotaId){
                            item.kpiQuotas.splice(node,1);
                        }
                    })
                }
                this.treeData = temp;

            },
            //处理id
            dealMaxid(MaxId){
                let parentSplice = MaxId.split('').slice(4);
                let newMaxID = parseInt(parentSplice[parentSplice.length-1])+1;
                // parentSplice.pop();
                parentSplice.push(newMaxID+'');
                return parentSplice.join('')
            },
            initNewQuotaId(arr, year) {
                let prefixQuotaId = Number(year) * 100;
                arr.forEach(item => {
                    item.quotaId = String(++prefixQuotaId);
                    let prefixSubQuotaId = prefixQuotaId * 100;
                    item.kpiQuotas.forEach(subItem => {
                        subItem.quotaId = String(++prefixSubQuotaId)
                    })
                })
            },
            setTree(){
                this.loadIndicator = true;
                let temp = [];
                let lastIndex = this.treeData.length - 1;
                this.treeData.forEach((item, index)=>{
                    if (index < lastIndex) {
                        if(Object.prototype.toString.call(item.quotaScoringDepartId) === "[object String]"){
                            delete item.quotaMakeNewDepartId;
                            delete item.quotaScoringNewDepartId;
                        }else {
                            item.quotaMakeDepartId=item.quotaMakeDepartId.join('-');
                            item.quotaScoringDepartId=item.quotaScoringDepartId.join('-');
                            delete item.quotaMakeNewDepartId;
                            delete item.quotaScoringNewDepartId;
                        }
                        temp.push(item);
                    }
                });
                this.initNewQuotaId(temp, this.reviewForm.fileYear);
                this.$http('POST',`/identity/kpiQuota/blukSave?quotaYear=${this.reviewForm.fileYear}`, temp,false).then(data=>{
                    this.loadIndicator = false;
                    this.getTree(new Date(this.reviewForm.fileYear).getFullYear()).then(
                        data => {
                            if (!this.hasTask) {
                                this.treeData.push({})
                            }
                        }
                    );
                    this.$message({
                        type: 'success',
                        message: '指标制定成功！'
                    })
                    
                })
            },
            submit(form){
                 //判断一二级指标树是否大于1，如果是空要提示不能为空
                if(this.treeData.length <= 1){
                    this.$message({
                        type:'warning',
                        message:'一二级指标不能为空！'
                    })
                }else {
                    this.$refs[form].validate((valid) => {
                        if (valid) {
                            this.loadIndicator = true;
                            //首先对当前页面的数据有一个隐藏的保存的操作
                            let temp = [];
                            let lastIndex = this.treeData.length - 1;
                            this.treeData.forEach((item, index)=>{
                                if (index < lastIndex) {
                                    if(Object.prototype.toString.call(item.quotaMakeDepartId) === "[object String]"){
                                        delete item.quotaMakeNewDepartId;
                                        delete item.quotaScoringNewDepartId;
                                    }else {
                                        item.quotaMakeDepartId=item.quotaMakeDepartId.join('-');
                                        item.quotaScoringDepartId=item.quotaScoringDepartId.join('-');
                                        delete item.quotaMakeNewDepartId;
                                        delete item.quotaScoringNewDepartId;
                                    }
                                    temp.push(item);
                                }
                            });
                            this.initNewQuotaId(temp, this.reviewForm.fileYear);
                            this.$http('POST',`/identity/kpiQuota/blukSave?quotaYear=${this.reviewForm.fileYear}`, temp,false).then(data=>{
                                // this.taskObj = '';
                                // let arr = [];
                                let year = new Date(this.reviewForm.fileYear).getFullYear();
                                // this.treeData.forEach((item, index)=>{
                                //     if (index < lastIndex) {
                                //         if(Object.prototype.toString.call(item.quotaMakeDepartId) === "[object String]"){
                                //             let currentArr = item.quotaMakeDepartId.split('-');
                                //             currentArr.forEach((i)=>{
                                //                 arr.push(i)
                                //             })
                                //         }else {
                                //             item.forEach((i)=>{
                                //                 arr.push(i)
                                //             })
                                //         }
                                //     }
                                // });
                                // let set = new Set(arr);
                                this.form.name = year + '指标制定任务';
                                this.form.taskModule = "SECRETARY";
                                if(this.releaseType == '村干部信息更新') {
                                    this.form.taskModule = "IN_SECRETARY";
                                }
                                this.form.taskObject = this.allId;
                                this.form.taskYear = this.reviewForm.fileYear;
                                this.$http('POST', `/identity/cadreTask/`, this.form).then((data) => {
                                    if (data) {
                                        // 移除最后一个空值
                                        // if (JSON.stringify(this.treeData[this.treeData.length-1]) == '{}') {
                                        //   this.treeData.pop();
                                        // }
                                        this.form = {};
                                        this.initType();
                                        this.$refs[form].resetFields();
                                        setTimeout(() => {
                                            this.loadIndicator = false;
                                            // this.hasTask=true;
                                            // this.getAllTask();
                                        }, 500);
                                        this.$refs.indexManage.checkIsHasTask(this.reviewForm.fileYear);

                                    } else {
                                        this.$message({
                                            type: "danger",
                                            message: '任务发布失败！'
                                        })
                                    }
                                })
                            })
                        }
                    });
                }
            },
            async indexConfirm(){
              await this.$http('GET', `/identity/cadreTaskObject/quota/confirm?taskId=${this.taskContent.id}`,  false).then(data => {
                // console.log(data, 'data');
                if (data) {
                  // 移除最后一个空值
                  this.treeData.pop();
                  this.hasTask = true;
                  this.$message({
                    type: 'success',
                    message: '确认成功'
                  })
                  // this.checkIsHasTask(this.reviewForm.fileYear);
                } else {
                  this.$message({
                      type: "danger",
                      message: '指标确认失败！'
                  })
                  // this.checkIsHasTask(this.reviewForm.fileYear);
                }
              })
              
            },
            reWrite(form){
                this.form = {};
                this.initType();
                this.$refs[form].resetFields();
            },
            initType(){
                if(this.releaseType){
                    this.form.type = this.releaseType;
                    this.disabled = true;
                }else{
                    this.typeList = this.checkTypeList;
                    this.disabled = false;
                }
            },
            getDep(){
                this.$http('get','/identity/sysDistrict/quotaDepartments',false).then(data=>{
                    let allTown = {};
                    allTown.label = '所有镇';
                    allTown.value = '';
                    let zhenList = JSON.parse(sessionStorage.getItem('towns'));
                    zhenList.forEach((item)=>{
                        allTown.value+=item.districtId+','
                    });
                    let allTownId = allTown.value;
                    let allDepId =  '';
                    allTown.value = allTown.value.substring(0,allTown.value.length-1);
                    this.depList.push(allTown);
                    data.forEach((item,index)=>{
                      let depItem = {};
                        for (var key in item){
                          allDepId+=key+','
                          depItem.label = item[key];
                            depItem.value = key;
                            this.depList.push(depItem);
                        }
                    })
                    let allId = allTownId + allDepId;
                    this.allId = allId.substring(0,allId.length-1);
                })
            },
            handleScroll(e) {
                document.getElementById('activity-label-key').scrollLeft = e.target.scrollLeft;
                document.getElementById('org-label-key').scrollTop = e.target.scrollTop;
            },
            scrollTo(type) {
                if (type === 'left') {
                    document.getElementById('result-table-content').scrollLeft -= 400;
                    document.getElementById('activity-label-key').scrollLeft -= 400;

                } else {
                    document.getElementById('result-table-content').scrollLeft += 400;
                    document.getElementById('activity-label-key').scrollLeft -= 400;
                }
            },
            checkIsHasTask (year) {
                this.hasTask = false;
                this.$http("POST", `/identity/cadreTask/getCurrentTask/考核指标内容制定?year=${year}`, {}, false).then(
                    data => {
                        if (data) {
                            this.taskContent = data;
                            // this.trackInfo(data);
                            this.indexObj = this.taskContent;
                            if (data.hasConfirm == '1') {
                              this.hasTask = true;
                              // this.treeData.pop();
                            } else {
                              this.treeData.push({});
                            }
                        } else {
                          this.taskContent = '';
                          this.treeData.push({});
                        }
                    }
                )
            },
            //获取历年所有考核内容制定指标
            // getAllTask(){
            //     this.totalLoad = true;
            //     this.$http('POST', `/identity/cadreTask/list`, {type:'考核指标内容制定', taskYear: this.reviewForm.fileYear}, false).then(
            //         data => {
            //             this.allTask = data;
            //             // if(data && data.length > 0){
            //             //     this.trackInfo(this.allTask[0]);
            //             // }
            //             this.totalLoad = false;
            //         }
            //     )
            // },
            // trackInfo(item){
            //     this.$http('GET',`identity/cadreTask/${item.id}taskId`,false).then(data=>{
            //         this.trackListCopy = [].concat(data);
            //         let item = this.treeData[this.quotaActiveIndex];
            //         let temp = [];
            //         this.trackListCopy.forEach((subItem, index) => {
            //             // 当前指标的任务对象有哪些
            //             if (item.quotaMakeDepartId && item.quotaMakeDepartId.indexOf(subItem.objectId) !== -1) {
            //                 temp.push(subItem);
            //             }
            //         })
            //         this.trackList = temp;
            //         this.hasTask = true;
            //         // this.handleTownChange(this.trackList[this.townQuotaActiveIndex], this.townQuotaActiveIndex);
            //     });
            // },
            handleCurrentQuotaChange(item, index) {
                this.expandable = true;
                this.quotaActiveIndex = index;
                // 如果点击的是最后一个也就是加号按钮，弹出一级新增框
                if (index === this.treeData.length - 1 && !this.hasTask) {
                    this.expandable = false;
                    this.addFirstIndex();
                };
                // this.trackList = [];
                // this.trackListCopy.forEach((subItem, index) => {
                //     // 当前指标的任务对象有哪些
                //     if (item.quotaMakeDepartId && item.quotaMakeDepartId.indexOf(subItem.objectId) !== -1) {
                //         this.trackList.push(subItem);
                //     }
                // });
                // if (this.hasTask) {
                //     this.handleTownChange(this.trackList[this.townQuotaActiveIndex], this.townQuotaActiveIndex);
                // };
            },
            handleCommissure(index) {
              
                if (index != this.quotaActiveIndex) {
                    this.quotaActiveIndex = index;
                    this.expandable = true;
                    // this.trackList = [];
                } else {
                    this.expandable = !this.expandable;
                    // this.trackList = [];
                }
            },
            childLine(arr) {
                if (!arr) {
                    return {height: '0px'}
                }
                let size = arr.length;
                return {height: `${175 * size - 165 - 40 * (size - 1) - 8}px`}
            },
            itemPrefix(status) {
                let style = {
                    width: '4px',
                    height: '95px',
                    borderRadius: '4px 0px 0px 4px',
                    display: 'inline-block'
                };
                if (status === '0') {
                    style.background = 'rgba(248,52,75,1)';
                } else if (status === '1') {
                    style.background = 'rgba(255,192,42,1)';
                } else if (status === '2') {
                    style.background = 'rgba(85,189,148,1)';
                }else if (status === '3') {
                    style.background = 'rgba(64,158,255,1)';
                };
                return style;
            },
            handleStatusLabel(status) {
                if (status === '0') {
                    return `<span style="color: rgba(248,52,75,1);">待编辑</span>`
                } else if (status === '1') {
                    return `<span style="color: rgba(255,192,42,1);">待审核</span>`
                } else if (status === '2') {
                    return `<span style="color: rgba(85,189,148,1);">审核通过</span>`
                }else if (status === '3') {
                    return `<span style="color: rgba(64,158,255,1);">确认通过</span>`
                };
            },
            // async handleTownChange(item, index) {
            //     // 选中的和中间的交换位置
            //     let centerIndex = Math.floor(this.trackList.length/2);
            //     let temp = [].concat(this.trackList);
            //     let centerItem = this.trackList[centerIndex];
            //     let currentItem = this.trackList[index];
            //     temp[centerIndex] = currentItem;
            //     temp[index] = centerItem;
            //     this.trackList =  temp;
            //     this.townQuotaActiveIndex = 0;
            //     this.expandable = false;
            //     this.activeTownIndex = centerIndex;
            //     let currentQuota = this.treeData[this.quotaActiveIndex];
            //     let path = `/identity/kpiQuota/getBlowSecondsByQuotaId?quotaId=${currentQuota.quotaId}&districtId=${item.objectId}`;
            //     if (item.objectType === 'Depart') {
            //         path += `&isDepart=1`
            //     }
            //     // this.townQuotas = await this.$http("GET", path, false);

            // },
            // handleTownQuotasChange(index) {
            //     if (index !== this.townQuotaActiveIndex) {
            //         this.townQuotaActiveIndex = index;
            //         this.townQuotaExpandable = true;
            //     } else {
            //         this.townQuotaExpandable = !this.townQuotaExpandable;
            //     }
            // }
        },
        watch: {
            'releaseList': {
                handler: function (newVal, oldVal) {
                    if(newVal.length>4){
                        let height = this.releaseList.length*75;
                        let time = (this.releaseList.length-4)*2000;
                        this.scroll.marginTop = `-${height}px`;
                        this.scroll.transition = `${this.releaseList.length*2}s`;
                        setInterval(()=>{
                            if(this.scroll.marginTop == `-${height}px`){
                                this.scroll.marginTop = `0px`;
                                this.scroll.transition = `0s`;
                                setTimeout(()=>{
                                    this.scroll.marginTop = `-${height}px`;
                                    this.scroll.transition = `${this.releaseList.length*2}s`
                                },500)

                            }else{
                                this.scroll.marginTop = `-${height}px`;
                                this.scroll.transition = `${this.releaseList.length*2}s`;
                            }
                        },time)
                    }
                }
            },
            //模態框新增初始化問題
            'addTreeView':{
                handler:function (val,old) {
                    if(!val){
                        this.$data.addForm={}
                    }
                }
            }

        },
        components:{
            indexManage
        },
        mounted() {
            this.getTree(this.reviewForm.fileYear).then(_=> {this.checkIsHasTask(this.reviewForm.fileYear)});
            this.getDep();
            this.initType();
        },
        created(){
            this.user = JSON.parse(sessionStorage.getItem("userInfo"));
        }
    }
</script>

<style scoped>
    .FormulationOfAssessmentIndicators .release-icon {
        margin-left: 0px;
        position:relative;
        vertical-align: middle;
    }
    .FormulationOfAssessmentIndicators .release-form {
        float: right;
        margin-right: 30px;
        text-align: left;
        max-width: 800px;
        display: inline-block;
        vertical-align: top;
    }
    .cardHeight .left-content {
        width: 700px;
        margin-top: calc(100vw / 1920 * 50);
        padding-right: 100px;
        border-right: 1px solid #b9b9b9;
        text-align: left;
        display: inline-block;
        vertical-align: top;
        padding-top: 20px;
    }
    .save-button {
        width: 84px;
        height: 32px;
        float: right;
    }
    .cardHeight .rightTree {
        width: 670px;
        margin-top: calc(100vw / 1920 * 50);
        margin-left: 50px;
        padding-right: 100px;
        text-align: left;
        display: inline-block;
        vertical-align: top;
        padding-top: 20px;
        background-color: transparent;
    }
    .slot-t-node {
        width: 100%;
    }
    .formulationOfAssessmentIndicators-title{
        font-size: 16px;
        color: #484848;
        text-align: left;
        height: 30px;
        line-height: 30px;
        text-indent: 10px
    }
    .topSTyle {
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .topCardSTyle {
        overflow: hidden;
        min-height: 600px;
        margin-top: 1px !important;
    }
    .bottomStyle {
        padding-left: 10px;
        padding-right: 10px;
        margin-top: 0px;
    }
    .tableCol td{
        height: 100px;
        font-size: 16px;
    }
    .tableContent button{
        height: 100px;
        width: 100px;
        padding:3px 3px;
        border-radius:4px;
        background-color: #F4F4F4;
        font-size: 14px;
    }
    .tableContent > tr > td > div{
        height: 25px;
        width: 100px;
    }
    .tableContent .sta-content *{
        width: 150px;
        font-size: 14px;
        color: white;
        height: 35px;
        line-height: 35px;
        letter-spacing: 2px;
        transition: all .3s;
    }
    .tableContent .sta-content :hover{
        cursor: pointer;
        transform: scale(1.1);
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border: 1px transparent;
    }
    .allYearTask {


    }
    .allYearTask p{
        font-size: 20px;
        font-weight: bold;
    }
    .allYearTask span {
        font-size: 14px;
    }
    .taskDetail{
        display: flex;
        text-align: center;
        min-height: 300px;
        border-radius: 10px;
    }
    .townDetailDiv{
        width: 138px;
        font-size: 14px;
        background-color: #43a047;
        height: 70px;
        color: #fff;
        border: 1px solid #fff;
        transition: all .3s;
    }
    .townDetailDiv:hover{
        transform: scale(1.1);
        border: 1px transparent;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    }
    .currentTask {
        text-align: left;
        font-size: 16px;
        font-weight: bold;
        margin-top: 30px;
    }
    .FormulationOfAssessmentIndicators .outDiv{
        float: left;
        border: 1px solid #eeeced;
        border-bottom: none;
        border-right: none;
        font-weight: bold;
        text-align: center;
    }
    .FormulationOfAssessmentIndicators .twoIndex{
        width: 150px;
        display: inline-block;
    }
    .FormulationOfAssessmentIndicators .thirdIndex{
        width: 280px;
        display: inline-block;
    }
    .FormulationOfAssessmentIndicators .scoreIndex{
        width: 50px;
        display: inline-block;
        color: red;
        margin-left: -4px;
    }
    .FormulationOfAssessmentIndicators .lastResultBorder{
        border-right:1px solid #eeeced;
    }
</style>
<style rel="stylesheet/scss" lang="scss">
    .TreeStructure .el-tree {
        position: relative;
        top: 0;
        left: 0;
    }
    .FormulationOfAssessmentIndicators .el-col-4{
        text-align: left;
    }
    .FormulationOfAssessmentIndicators .el-tree-node:focus > .el-tree-node__content {
        background-color: #EAFDE1 !important;
        color: #3FA584;
    }

    .FormulationOfAssessmentIndicators  .el-tree-node__content:hover {
        background: #EAFDE1;
    }
    .FormulationOfAssessmentIndicators {
        .quota-root {
            width:103px;
            height:263px;
            background: url("/static/village/quota-root-bg.png") center;
            border-radius:4px;
            padding-top: 14px;
            background-size: 141px 360px;
        }
        .root-name {
            width:23px;
            height:159px;
            font-size:24px;
            font-family:Source Han Sans CN;
            font-weight:400;
            color:rgba(42,42,42,1);
            line-height:27px;
            margin: 0 33px 0 33px;
        }
        .root-logo {
            width:93px;
            height:86px;
            border-radius:4px;
        }
        .expand-icon {
            width: 20px;
            height: 20px;
            background: url("/static/village/expand.png");
            cursor: pointer;
        }
        .commissure-icon {
            width: 20px;
            height: 20px;
            background: url("/static/village/commissure.png");
            background-size: cover;
            cursor: pointer;
        }
        .row-line {
            width: 80px;
            border-top: 2px solid #71C3B5;
        }
        .root-row-line {
            width: 80px;
            border-top: 2px solid #389671;
        }
        .root-col-line {
            margin-left: -2px;
            border-left: 2px solid #71C3B5;
        }
        .root-col-line-active {
            border-left: 2px solid #389671;
            position: relative;
            left: -2px;
        }
        .first-level-out-container {
            position: relative;
            left: -2px;
        }
        .first-level-container {
            /*width: 330px;*/
            height: 95px;
            display: flex;
            justify-content: start;
            align-items: center;
            margin: 40px 0;
            cursor: pointer;
        }
        .first-level-container:hover,.first-level-container-active {
            .first-level-mid {
                background: #389671;
                height: 2px;
            }
            .first-level-top {
                color: #389671;
            }
            .first-level-contain {
                border: 2px solid  #389671;
            }
        }
        .first-level-contain {
            width:250px;
            height:95px;
            background:rgba(255,255,255,1);
            box-shadow:0px 3px 6px 0px rgba(50,140,104,0.24);
            border-radius:4px;
        }
        .second-level-contain {
            width: 230px;
            vertical-align: top;
            display: inline-block;
        }
        .first-level-top {
            font-size: 20px;
            font-family: "Microsoft YaHei UI Light";
            font-weight:400;
            color:rgba(104,104,104,1);
            margin: 12px 26px 10px 26px;
            text-align: left;
        }
        .second-level-top {
            font-size: 20px;
            font-family: "Microsoft YaHei UI Light";
            font-weight:400;
            color:rgba(104,104,104,1);
            margin: 12px 18px 10px 18px;
            text-align: left;
            display: inline-block;
            width: 150px;
        }
        .first-level-mid {
            margin: 0 20px;
            background:rgba(189,188,188,1);
            height:1px;
            opacity:0.6;
        }
        .second-level-mid {
            margin: 0 18px;
            background:rgba(189,188,188,1);
            height:1px;
            opacity:0.6;
        }
        .first-level-bottom {
            font-size:20px;
            font-weight:400;
            color:rgba(104,104,104,1);
            margin: 10px 18px 16px 18px;
            text-align: left;
        }
        .second-level-bottom {
            font-size:20px;
            font-weight:400;
            color:rgba(104,104,104,1);
            margin: 10px 18px 16px 18px;
            text-align: left;
        }
        .star {
            width: 22px;
            height: 22px;
            background: url("/static/village/star.png");
            display: inline-block;
            vertical-align: text-bottom;
        }
        .edit {
            width:15px;
            height:17px;
            background: url("/static/village/edit.png");
            margin-left: 4px;
            float: right;
            display: inline-block;
            vertical-align: text-bottom;
            position: relative;
            top: 2px
        }
        .del {
            width:14px;
            height:20px;
            background: url("/static/village/del.png");
            margin-left: 8px;
            margin-right: 2px;
            float: right;
            display: inline-block;
            vertical-align: text-bottom;
        }
        .child-add {
            width: 20px;
            height: 18px;
            background: url("/static/village/child-add.png");
            background-size: cover;
            display: inline-block;
            vertical-align: text-bottom;
            float: right;
            position: relative;
            top: 6px;
        }
        .quota-name {
            font-weight: 700;
            vertical-align: top;
            display: inline-block;
            max-width: 194px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .quota-score {
            width:50px;
            height:22px;
            font-size:20px;
            font-family:FZHei-B01S;
            font-weight:400;
            color:rgba(22,147,96,1);
            margin-left: 8px;
            display: inline-block;
            vertical-align: top;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        .quota-container {
            display: flex;
            justify-content: start;
            align-items: center;
            transform-origin: left top;
            transform: scale(0.7);
            width: 1300px;
            padding-left: 150px;
            transition: all .3s;
            // overflow: auto;
        }
        .row-line-active {
            border-top: 2px solid #389671;
        }
        .first-level-add {
            width: 28px;
            height: 28px;
            background: url("/static/village/first-level-add.png");
            transition: all .2s;
            &:hover {
                transform: scale3d(1.1, 1.1, 1.1);
            }
        }
        .quota-detail {
            display: flex;
            justify-content: left;
            align-items: center;
            transition: all .6s;
        }
    }
    .towMake{
        border-bottom: 2px solid #D7F4E9;
        height: 35px
    }
    .titleReleave{
        text-align: left;
        border-left: 4px solid #55BD94;
        font-size: 18px;
        font-weight: bold;
    }
    .titleReleave span{
        color: #303030;
        font-weight:bold;
        font-size:18px;
        padding-left: 10px;
        font-family:Source Han Sans CN;
        letter-spacing: 2px;
    }
    .town-item {
        width:256px;
        height:95px;
        background:rgba(255,255,255,1);
        box-shadow:0px 3px 6px 0px rgba(50,140,104,0.24);
        border-radius:4px;
        text-align: left;
        transition: all .5s;
    }
    .town-item:hover, .town-item-active {
        border: 2px solid  #389671;
        cursor: pointer;
    }
    .bage-status {
        width: 14px;
        height: 22px;
        display: inline-block;
        vertical-align: text-bottom;
    }
    .bage-status-0 {
        background: url("/static/village/bage-0.png");
    }
    .bage-status-1 {
        background: url("/static/village/bage-1.png");
    }
    .bage-status-2 {
        background: url("/static/village/bage-2.png");
    }
    .current-status {
        width: 174px;
        font-size: 18px;
        font-family: "Microsoft YaHei UI Light";
        font-weight:700;
        color:rgba(92,92,92,1);
        padding-left: 6px;
        display: inline-block;
    }
    .town-container {
        margin-left: 100px;
    }
    .town-item-container {
        height: 95px;
        display: flex;
        justify-content: left;
        align-items: center;
        margin: 15px 0;
    }
    .town-quota-container {
        width: 330px;
        display: flex;
        justify-content: left;
        align-items: center;
        flex-direction: column;
    }
    .town-quota-contain {
        display: flex;
        width: 330px;
        margin: 20px 0;
        margin-left: -2px;
        height: 95px;
    }
    .last-quota-container {
        display: flex;
        align-items: center;
        margin: 20px 0;
        justify-content: left;
        margin-left: -2px;
    }
    .list-complete-item {
        transition: all 1s;
        margin-right: 10px;
    }
    .list-complete-enter, .list-complete-leave-to
        /* .list-complete-leave-active for below version 2.1.8 */ {
        opacity: 0;
        transform: translateY(30px);
    }
    .list-complete-leave-active {
        position: absolute;
    }
    .btnReleave{
        border: 1px solid rgba(85,189,148, 0.6);
        background:rgba(85,189,148,1);
        border-radius:4px;
        color: #fff;
    }
    .btnReleave.is-disabled {
        background: rgba(85,189,148, 0.6) !important;
        border: 1px solid rgba(85,189,148, 0.6);
    }
    .btn_reset{
        background:#E6A23C;
        border-radius:4px;
    }
    .btnReleave:hover {
        border: 1px solid rgba(85,189,148, 0.6);
        background: rgba(85,189,148, 0.6) !important;
    }
    
</style>
<style>
    .end_time.el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 215px!important;
    }
    .btnReleave.el-button--primary.is-active, .btnReleave.el-button--primary:active {
          background: #55bd94!important;
          border-color: #55bd94!important;
          color: #FFF;
    }
    .btnReleave.el-button--primary:focus, .btnReleave.el-button--primary:hover {
        background: #55bd94!important;
        border-color: #55bd94!important;
        color: #FFF;
    }
    .btnReleave.btnConfirm {
      width: 180px;
      height: 104px;
    }
    .el-icon-check.el-confirm {
      font-size: 40px!important ;
    }
    .review_tooltip {
      max-width: 200px;
      font-size: 14px;
      line-height: 1.5;
      letter-spacing: 2px;
      text-indent: 2em;
    }
</style>
